<template>
  <div class="container">
    <el-card shadow="always">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-date-picker
            v-model="query.time"
            @change="pickers"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
         value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            :clearable="false"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="6"
          >    
          <el-input
                maxlength="50"
            v-model="query.recipeName"
            placeholder="请输入菜谱名称"
            clearable
          ></el-input
        ></el-col>
        <el-col :span="4">
          <el-select
            v-model="query.dinnerTarget"
            placeholder="请选择用餐对象"
            clearable
          >
            <el-option
              v-for="item in ['学生', '教师', '其他']"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="query.mealTimesType"
            placeholder="请选择进餐餐次"
            clearable
          >
            <el-option
              v-for="item in ['早餐', '早点', '午餐', '午点', '晚餐']"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-col>
    
        <el-col :span="2">
          <el-button type="primary" @click="query.page=1;getList()">搜索</el-button>
        </el-col>
      </el-row>
      <rz-height></rz-height>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="adTime" label="排餐时间" width="180">
        </el-table-column>
        <el-table-column prop="mealTimesType" label="进餐餐次" width="180">
        </el-table-column>
        <el-table-column prop="dinnerTarget" label="用餐对象">
        </el-table-column>
        <el-table-column prop="recipeName" label="菜谱信息"> </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="small" type="primary" @click="viewMenu(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        @pagination="getList"
        :page.sync="query.page"
      />
      <rz-dialog
        :dialogVisible.sync="dialogVisible"
        :isShowConfirm="false"
        title="查看菜谱详情"
      >
        <el-form label-width="80px">


<el-row>
          <el-col :span="12">
              <el-form-item label="排餐时间"> {{ data.adTime }} </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="进餐餐次">
            {{ data.mealTimesType }}
          </el-form-item>
          </el-col>
        </el-row>



         <el-row>
          <el-col :span="12">
               <el-form-item label="用餐对象">
            {{ data.dinnerTarget }}
          </el-form-item>
          </el-col>
          <el-col :span="12">
           <el-form-item label="菜谱信息"> {{ data.recipeName }} </el-form-item>
          </el-col>
        </el-row>
         
       
         
          <el-form-item label="备注"> {{ data.remark||'--' }} </el-form-item>
          <el-form-item label="食谱图片">
            <el-image
            v-if="data.recipeFileurl"
              style="width:150px; height: 150px;margin-right:10px"
              :src="data.recipeFileurl"
              fit="cover"
              :preview-src-list="[data.recipeFileurl]"
            ></el-image>
          </el-form-item>
        </el-form>
      </rz-dialog>
    </el-card>
  </div>
</template>
<script>
import { queryUnitMealTimeList } from "@/api/modules/enterprise";
export default {
  // props:[],
  // 页面加载
  created() {
     this.query.startDate=this.$moment().subtract(1, 'month').format('YYYY-MM-DD')
    this.query.endDate=this.$moment().format('YYYY-MM-DD')
    this.query.time=[this.$moment().subtract(1, 'month').format('YYYY-MM-DD'),this.$moment().format('YYYY-MM-DD')]
    this.getList();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      dialogVisible: false,
      query: {
        dinnerTarget: "",
        endDate: "",
        isPage: 0,
        mealTimesType: "",
        page: 1,
        pageSize: 10,
        recipeName: "",
        startDate: "",
        unitId: sessionStorage.getItem("interpretation"),
           time: [],
      },
   
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() > Date.now() ||
            time.getTime() < new Date("2021-01-01").getTime()
          );
        },
      },
      tableData: [],
      total: 0,
      data: {},
    };
  },
  // 方法
  methods: {
    pickers(e) {
      if (e) {
        this.query.startDate = e[0];
        this.query.endDate = e[1];
      } else {
        this.query.startDate = "";
        this.query.endDate = "";
      }
    },
    getList() {
      queryUnitMealTimeList(this.query).then((res) => {
        this.tableData = res.data;
        this.total = res.totalCount;
      });
    },
    viewMenu(e) {
      this.data = e;
      this.dialogVisible = true;
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
</style>